/*
 * @Author: Kiro AI Assistant
 * @Date: 2025-01-10
 * @Description: 音乐搜索页面示例 - 展示搜索功能的完整实现
 */

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../viewmodels/music_search_view_model.dart';
import '../viewmodels/music_player_view_model.dart';
import '../pages/music_search_page.dart';

/// 音乐搜索示例页面
/// 展示如何使用音乐搜索功能
class MusicSearchExample extends StatelessWidget {
  const MusicSearchExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MusicSearchViewModel()),
        ChangeNotifierProvider(create: (_) => MusicPlayerViewModel()),
      ],
      child: MaterialApp(
        title: '音乐搜索示例',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: const MusicSearchExampleHome(),
        routes: {
          '/search': (context) => const MusicSearchPage(),
        },
      ),
    );
  }
}

/// 音乐搜索示例主页
class MusicSearchExampleHome extends StatelessWidget {
  const MusicSearchExampleHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('音乐搜索示例'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF1E3C72),
              Color(0xFF2A5298),
            ],
          ),
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '音乐搜索功能',
                  style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 10),
                const Text(
                  '基于 MVVM 架构的音乐搜索实现',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white70,
                  ),
                ),
                const SizedBox(height: 30),

                // 功能特性列表
                _buildFeatureCard(
                  icon: Icons.search,
                  title: '智能搜索',
                  description: '支持音乐、歌手、专辑搜索\n关键词高亮显示',
                ),
                const SizedBox(height: 16),

                _buildFeatureCard(
                  icon: Icons.history,
                  title: '搜索历史',
                  description: '自动保存搜索记录\n快速重复搜索',
                ),
                const SizedBox(height: 16),

                _buildFeatureCard(
                  icon: Icons.trending_up,
                  title: '热门推荐',
                  description: '热门搜索关键词\n发现更多音乐',
                ),
                const SizedBox(height: 16),

                _buildFeatureCard(
                  icon: Icons.playlist_play,
                  title: '即时播放',
                  description: '搜索结果直接播放\n无缝音乐体验',
                ),

                const Spacer(),

                // 开始体验按钮
                SizedBox(
                  width: double.infinity,
                  height: 56,
                  child: ElevatedButton(
                    onPressed: () => Navigator.pushNamed(context, '/search'),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      foregroundColor: const Color(0xFF1E3C72),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(28),
                      ),
                      elevation: 8,
                    ),
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.search, size: 24),
                        SizedBox(width: 8),
                        Text(
                          '开始搜索音乐',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 20),

                // 技术说明
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color: Colors.white.withOpacity(0.2),
                    ),
                  ),
                  child: const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '技术实现',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: 8),
                      Text(
                        '• MVVM 架构模式\n'
                        '• Provider 状态管理\n'
                        '• 分页加载优化\n'
                        '• 本地缓存机制\n'
                        '• 错误处理机制',
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.white70,
                          height: 1.5,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 构建功能特性卡片
  Widget _buildFeatureCard({
    required IconData icon,
    required String title,
    required String description,
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: Colors.white.withOpacity(0.2),
        ),
      ),
      child: Row(
        children: [
          Container(
            width: 48,
            height: 48,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(24),
            ),
            child: Icon(
              icon,
              color: Colors.white,
              size: 24,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  description,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.white70,
                    height: 1.4,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 搜索功能演示工具类
class SearchDemoHelper {
  /// 模拟搜索数据
  static const List<String> mockSearchQueries = [
    '周杰伦',
    '邓紫棋',
    '林俊杰',
    '陈奕迅',
    '薛之谦',
    '毛不易',
    '李荣浩',
    '张学友',
  ];

  /// 获取随机搜索建议
  static String getRandomSearchQuery() {
    final random =
        DateTime.now().millisecondsSinceEpoch % mockSearchQueries.length;
    return mockSearchQueries[random];
  }

  /// 显示搜索提示
  static void showSearchTip(BuildContext context) {
    final query = getRandomSearchQuery();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('试试搜索: $query'),
        action: SnackBarAction(
          label: '搜索',
          onPressed: () {
            Navigator.pushNamed(context, '/search');
          },
        ),
      ),
    );
  }
}
